// 动态生成的日期组件
import { h, VNode } from 'vue';
import {
  BaseFormItemConfig,
  BaseFormItemConfigInterface
} from '@/util/vnode_create_util/dynamic_form_creator/dynamic_form_item_creator';
import { ElDatePicker, ElTimePicker } from 'element-plus/es';
import {
  SelectFormItemConfigInterface
} from '@/util/vnode_create_util/dynamic_form_creator/creator/select_creator';

export interface DatePickerFormItemConfigInterface<T> extends BaseFormItemConfigInterface<T> {
  disabledDate?: (date: Date, formData: T) => boolean;
}
export class DatePickerFormItemConfig<T> extends BaseFormItemConfig<T> implements DatePickerFormItemConfigInterface<T> {
  disabledDate?: (date: Date, formData: T) => boolean;
  public constructor (data: Omit<SelectFormItemConfigInterface<T>, 'createMethod'>) {
    super({ ...data });
  }

  createMethod (config: this, formData: T): VNode {
    // @ts-ignore
    return <ElDatePicker onChange={val => config.onChange && config.onChange(val, formData)} key={`form${config.key ?? config.prop as string}`}
                         type={'year'}
                         v-model={formData[config.prop]}
                         style={{ width: config.inputWidth }}
                         disabled={typeof config.disabled !== 'function' ? config.disabled : config.disabled(formData)} disabledDate={(date: Date) => config.disabledDate && config.disabledDate(date, formData)}></ElDatePicker>;
  }
}
